<template>
  <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
    <div class="logo-container">
      <img src="../../assets/logo.svg" alt="皮影快闪" class="logo" />
      <h2 v-if="!isCollapsed" class="app-name">皮影快闪</h2>
    </div>
    
    <n-divider />
    
    <div class="menu-container">
      <n-menu
        :options="menuOptions"
        :collapsed="isCollapsed"
        :collapsed-width="64"
        :collapsed-icon-size="22"
        :indent="18"
        :inverted="isDarkTheme"
        @update:value="handleMenuClick"
      />
    </div>
    
    <div class="sidebar-footer">
      <n-tooltip placement="right" trigger="hover">
        <template #trigger>
          <n-button 
            quaternary 
            circle 
            size="large" 
            @click="toggleCollapse" 
            class="collapse-btn"
          >
            <template #icon>
              <n-icon size="18">
                <ChevronBackOutline v-if="!isCollapsed" />
                <ChevronForwardOutline v-else />
              </n-icon>
            </template>
          </n-button>
        </template>
        {{ isCollapsed ? '展开侧边栏' : '收起侧边栏' }}
      </n-tooltip>
      
      <n-tooltip placement="right" trigger="hover" v-if="isCollapsed">
        <template #trigger>
          <n-button 
            quaternary 
            circle 
            size="large" 
            @click="goToSettings" 
            class="settings-btn"
          >
            <template #icon>
              <n-icon size="18">
                <SettingsOutline />
              </n-icon>
            </template>
          </n-button>
        </template>
        设置
      </n-tooltip>
      <n-button 
        v-else 
        quaternary 
        @click="goToSettings" 
        class="settings-btn-text"
      >
        <template #icon>
          <n-icon size="18">
            <SettingsOutline />
          </n-icon>
        </template>
        设置
      </n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, h } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '../../stores/appStore'
import { storeToRefs } from 'pinia'
import { NMenu, NDivider, NButton, NTooltip, NIcon } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
import { 
  HomeOutline, 
  AppsOutline, 
  PersonOutline,
  PeopleOutline,
  SettingsOutline,
  ChevronBackOutline,
  ChevronForwardOutline,
  FolderOutline,
  CreateOutline,
  HeadsetOutline,
  VideocamOutline,
  HardwareChipOutline,
  BagHandleOutline,
  HelpCircleOutline
} from '@vicons/ionicons5'

const router = useRouter()
const appStore = useAppStore()
const { isDarkTheme } = storeToRefs(appStore)
const { isSidebarCollapsed, toggleSidebar } = appStore

const isCollapsed = computed(() => isSidebarCollapsed)

const toggleCollapse = () => {
  toggleSidebar()
}

const goToSettings = () => {
  router.push('/settings/general')
}

const handleMenuClick = (key: string) => {
  router.push(key)
}

// 菜单项配置
const menuOptions = computed<MenuOption[]>(() => [
  {
    label: '首页',
    key: '/welcome',
    icon: renderIcon(HomeOutline)
  },
  {
    label: '项目管理',
    key: '/projects',
    icon: renderIcon(FolderOutline)
  },
  {
    label: '编辑器',
    key: '/editor',
    icon: renderIcon(CreateOutline),
    children: [
      {
        label: '角色编辑',
        key: '/character-editor'
      },
      {
        label: '场景编辑',
        key: '/scene-editor'
      },
      {
        label: '时间轴',
        key: '/timeline'
      }
    ]
  },
  {
    label: 'AI生成',
    key: '/ai-text-generator',
    icon: renderIcon(HardwareChipOutline)
  },
  {
    label: '素材市场',
    key: '/market',
    icon: renderIcon(BagHandleOutline)
  },
  {
    label: '社区',
    key: '/community',
    icon: renderIcon(PeopleOutline)
  },
  {
    label: '帮助',
    key: '/tutorials',
    icon: renderIcon(HelpCircleOutline)
  },
  {
    label: '用户中心',
    key: '/user-center',
    icon: renderIcon(PersonOutline)
  }
])

// 图标渲染函数
function renderIcon(icon: any) {
  return () => h(NIcon, null, { default: () => h(icon) })
}
</script>

<style lang="scss" scoped>
.sidebar {
  display: flex;
  flex-direction: column;
  width: 220px;
  height: 100%;
  background-color: var(--component-background);
  transition: width 0.3s ease;
  border-right: 1px solid var(--border-color-base);
  
  &.collapsed {
    width: 64px;
  }
  
  .logo-container {
    display: flex;
    align-items: center;
    padding: 16px;
    
    .logo {
      width: 32px;
      height: 32px;
      margin-right: 12px;
    }
    
    .app-name {
      font-size: 18px;
      font-weight: 500;
      color: var(--text-color);
      white-space: nowrap;
      overflow: hidden;
    }
  }
  
  .menu-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .sidebar-footer {
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    
    .collapse-btn, .settings-btn {
      margin-bottom: 8px;
    }
    
    .settings-btn-text {
      width: 100%;
      display: flex;
      justify-content: flex-start;
    }
  }
}

:deep(.n-menu-item) {
  margin: 4px 0;
}

:deep(.n-menu-item-content) {
  margin: 0 8px;
  border-radius: var(--border-radius-base);
}

:deep(.n-menu-item-content--selected) {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}
</style> 